import React, {Component} from 'react';
import {Linking} from 'react-native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import HomeScreen from '../Screens/Home';
import CategoryScreen from '../Screens/Category';
import CartScreen from '../Screens/Cart';
import MineScreen from '../Screens/User';
import Ionicons from 'react-native-vector-icons/Ionicons';

const Tab = createBottomTabNavigator();

interface UrlParams {
  imageUrl: string;
  title: string;
  levelUrl: string;
  nickname: string;
}

const parseUrlParams = (url: string): UrlParams => {
  const params: UrlParams = {
    imageUrl: '',
    title: '',
    levelUrl: '',
    nickname: '',
  };
  const queryStringIndex = url.indexOf('?');
  if (queryStringIndex !== -1) {
    const queryString = url.substring(queryStringIndex + 1);
    const pairs = queryString.split('&');
    pairs.forEach(pair => {
      const [key, value] = pair.split('=');
      if (key && value) {
        params[key as keyof UrlParams] = decodeURIComponent(value);
      }
    });
  }
  return params;
};

export default class BottomTabsNavigator extends Component<any> {
  constructor(props: any) {
    super(props);
  }

  render() {
    return (
      <Tab.Navigator
        initialRouteName="Home"
        screenOptions={({route}) => ({
          tabBarIcon: ({focused, color, size}) => {
            let iconName: string;
            if (route.name === 'Home') {
              iconName = focused ? 'home-sharp' : 'home-outline';
            } else if (route.name === 'Category') {
              iconName = focused ? 'grid' : 'grid-outline';
            } else if (route.name === 'Cart') {
              iconName = focused ? 'cart' : 'cart-outline';
            } else {
              iconName = focused ? 'person' : 'person-outline';
            }
            return <Ionicons name={iconName} color={color} size={size * 0.9} />;
          },
          tabBarActiveTintColor: 'black',
          headerShown: false,
        })}>
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={options.HomeStackOptions}
        />
        <Tab.Screen
          name="Category"
          component={CategoryScreen}
          options={options.CategoryStackOptions}
        />
        <Tab.Screen
          name="Cart"
          component={CartScreen}
          options={options.CartStackOptions}
        />
        <Tab.Screen
          name="Mine"
          component={MineScreen}
          options={options.MineStackOptions}
        />
      </Tab.Navigator>
    );
  }

  componentDidMount(): void {
    Linking.getInitialURL()
      .then(url => {
        if (url) {
          if (url.includes('detail')) {
            const params = parseUrlParams(url);
            this.props.navigation.navigate('Detail', params);
          }
        }
      })
      .catch(() => {});
  }
}

const options = {
  HomeStackOptions: {
    title: '首页',
  },
  CategoryStackOptions: {
    title: '分类',
  },
  CartStackOptions: {
    title: '购物车',
  },
  MineStackOptions: {
    title: '我的',
  },
};